<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>_组件实例核心属性-refs</title>

    <style>
    </style>
</head>

<body>

    <div id="main"></div>

    <!-- 引入react核心库，引入对象：React -->
    <script src="./js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM，引入对象：ReactDOM -->
    <script src="./js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script src="./js/babel.min.js"></script>
    <!-- 引入对组件属性约束，引入对象：PropTypes -->
    <script src="./js/prop-types.js"></script>

    <script type="text/babel">

        class Com extends React.Component {

            /* 
                React.createRef 调用后返回一个容器，该容器返回可以存储ref所标识的节点
                该容器只能唯一使用，专人专用
            */

            myRef = React.createRef()

            showLeftInputData = () => {
                const input1 = document.getElementById('input1')
                console.log(this.refs.btn)
            }

            showRightInputData = () => {
                console.log(this.refs.ipt2.value)
            }

            showData = () => {
                console.log(this.fn_input1.value)
            }

            showData2 = () => {
                console.log(this.fn_input2.value)
            }

            showData3 = (event) => {
                // console.log(this.myRef.current.value)
                console.log(event.target.value)
            }

            setRef = (c) => {
                this.fn_input2 = c
            }

            render() {
                return (
                    <div>
                        <h1>字符串形式ref</h1>
                        <input ref="input1" type="text" placeholder="点击按钮我提示" />&nbsp;
                        <button ref="btn" onClick={this.showLeftInputData}>click me</button>&nbsp;
                        <input ref="ipt2" onBlur={this.showRightInputData} type="text" placeholder="失去焦点我提示" />

                        <h1>回调函数形式ref（直接绑定在组件的this上）</h1>
                        <h5>若以内联函数形式，则在更新状态时会触发两次（无关紧要）</h5>
                        <input ref={c => this.fn_input1 = c} onBlur={this.showData} type="text" placeholder="回调函数形式ref" />
                        <h5>内绑定回调函数</h5>
                        <input ref={this.setRef} onBlur={this.showData2} type="text" />
                        <h1>ref</h1>
                        <input ref={this.myRef} onBlur={this.showData3} type="text" />
                    </div>
                )
            }
        }


        ReactDOM.render(<Com />, document.getElementById('main'))

    </script>
</body>

</html>